<template>
  <el-form-item label="频道1">
    <!-- el-select上的value用来指定当前下拉列表中哪一项处于选中状态

    change：当用户切换了选中项之后，发生。它会自动传入当前选项对应的value -->
    <el-select
      placeholder="请选择频道"
      @change="hChange"
      :value="value"
    >
    <!--
      v-for中的key有什么用？：v-for是用来做循环的，用key来标记被循环的项之间的区别，
      这个标记在页面更新时能加快处理的速度。在vue-cli创建的项目，你必须要写key，否则
      会通不过。key值一般是独一无二的值（就像人的id一样），它会取index，取当前被循环
      对象的id

      label: 决定下拉框当前显示的内容。
      value：决定下拉框中每个选项对应的value ---- 当你选中这一项后，el-select中的value就是
             这个值
      示例
        ｛label：css， id: 0｝，｛label:html, id:1}
    -->
      <el-option
      v-for="(channel, idx) in channels"
      :key="idx"
      :label="channel.name"
      :value="channel.id"></el-option>
    </el-select>
  </el-form-item>
</template>

<script>
export default {
  name: 'channel',
  // 接收父组件传入的值
  props: ['value'],
  data () {
    return {
      channels: []
    }
  },
  created () {
    this.loadChannels()
  },
  methods: {
    hChange (val) {
      console.log('我们亲爱的用户，选中了', val)
      this.$emit('input', val)
    },
    async loadChannels () {
      // 发ajax获取数据
      const res = await this.$axios({
        method: 'GET',
        url: '/mp/v1_0/channels'
      })

      this.channels = res.data.data.channels
    }
  }
}
</script>
